<template>
  <div>
    <!-- 搜索条件开始-->
    <el-row :gutter="20">
      <el-col :span="24" class="moreList">
        <el-button type="primary" @click="handleAdd" size="mini" plain>
          <i class="iconfont icon-tianjia">新增</i>
        </el-button>
      </el-col>
    </el-row>
    <!-- 搜索条件结束 -->
    <!-- 新增可编辑表格 -->
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop label="名称" align="center">
        <template #default="scope">
          <el-input
            v-model="scope.row.name"
            v-show="scope.row.show"
            type="text"
            :min="0"
            :controls="false"
            :precision="2"
            size="mini"
            style="width: 90%"
          />
          <span v-show="!scope.row.show">
            {{ scope.row.name }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="platformName" label="业绩占比" align="center">
        <template #default="scope">
          <el-input-number
            v-model="scope.row.num"
            v-show="scope.row.show"
            type="number"
            :min="0"
            :controls="false"
            :precision="2"
            size="mini"
            style="width: 90%"
          />
          <span v-show="!scope.row.show">
            {{ scope.row.num }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop label="操作" min-width="180" align="center">
        <template #default="scope">
          <el-button
            @click="handleDelete(scope.$index)"
            class="btn-text-red"
            type="danger"
            size="mini"
          >
            <i class="iconfont icon-shanchu">删除</i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
//API接口
import api from "@/api";
//引入消息弹出框
import { ElMessageBox, ElMessage } from "element-plus";

export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    // 添加点击按钮
    handleAdd() {
      this.tableData.push({
        name: "",
        num: "",
        show: true,
      });
      this.$emit("tableData", this.tableData);
    },
    handleDelete(index) {
      ElMessageBox.confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(index, 1);
          ElMessage({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消删除!",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped></style>
